<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { getUserInfoApi } from '@/api/index'

import avatar from '@/static/images/flower_j.jpg'
import { useWallStore } from '@/store'

import { capsuleButtonHeight, systemInfo } from '@/utils/systemInfo'
import { generateUsername } from '@/utils/utils'

definePage({
  style: {
    navigationBarTitleText: '我的',
    navigationStyle: 'custom',
  },
})
// -------------

const userMsg = {
  avatar,
}
// let user = ref(null)
let { classListTotal, user } = storeToRefs(useWallStore())
function contactHandler() {
  uni.makePhoneCall({
    phoneNumber: '15000505008',
  })
}

function getUser() {
  if (user.value)
    return
  uni.showLoading({
    title: '加载中',
  })

  getUserInfoApi().then((res) => {
    user.value = res
  }).finally(() => {
    uni.hideLoading()
  })
}
function goClassList(type: string, title: string, totle: number) {
  uni.navigateTo({
    url: `/pages/classList/classList?type=${type}&classname=${title}`,
  })
}

onLoad(() => {
  getUser()
})

onUnload(() => {
  user.value = null
})
// #ifndef H5
onShareAppMessage((e) => {
  // 分享给好友

  return {
    title: '花朵壁纸-好友',
    path: '/pages/index/index',
  }
})
// 分享朋友圈
onShareTimeline(() => {
  return {
    title: '花朵壁纸-朋友圈',
    imageUrl: '/static/images/flower.png', // 1比1
  }
})
// #endif
</script>

<template>
  <view v-if="user" class="profile-container">
    <view :style="{ height: capsuleButtonHeight }" />
    <!-- 用户信息区域 -->
    <view class="user-info-section flex flex-col items-center justify-center p-20">
      <uv-image :src="userMsg.avatar" width="80px" height="80px" shape="circle" />
      <text class="my-5px text-18px text-#000 font-bold">{{ generateUsername() }}</text>
      <text class="my-5px text-14px text-#000 font-bold">IP:{{ user.IP || '' }}</text>
      <text class="text-12px text-#000">来自:{{ user.address.city || user.address.province || user.address.country }}</text>
    </view>
    <!-- 列表区域1 -->
    <view class="m-10px rounded-4px bg-#f7f8fa shadow-md">
      <view class="list-item">
        <view class="flex items-center p-12px" @click="goClassList('download', '我的下载', user.downloadSize)">
          <uv-icon name="download" size="20" color="#FF4D4F" class="mr-8px" />
          <text class="flex-1 text-16px">我的下载</text>
          <view class="mr-5px flex-1 text-right text-16px">
            {{ user.downloadSize || 0 }}
          </view>
          <uv-icon name="arrow-right" size="16" color="#ccc" />
        </view>
      </view>
      <view class="list-item">
        <view class="flex items-center p-12px" @click="goClassList('score', '我的评分', user.scoreSize)">
          <uv-icon name="star" size="20" color="#52C41A" class="mr-8px" />
          <text class="flex-1 text-16px">我的评分</text>
          <view class="mr-5px flex-1 text-right text-16px">
            {{ user.scoreSize }}
          </view>
          <uv-icon name="arrow-right" size="16" color="#ccc" />
        </view>
      </view>
      <!-- 联系客服 -->
      <view class="list-item">
        <view class="relative flex items-center p-12px">
          <uv-icon name="chat-fill" size="20" color="#1890FF" class="mr-8px" />
          <text class="flex-1 text-16px">联系客服</text>
          <uv-icon name="arrow-right" size="16" color="#ccc" />
          <!-- #ifdef MP-WEIXIN -->
          <button open-type="contact" class="absolute left-0 top-0 h-full w-full opacity-0">
            联系客服
          </button>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <button open-type="contact" class="absolute left-0 top-0 h-full w-full opacity-0" @click="contactHandler">
            拨打电话
          </button>
          <!-- #endif -->
        </view>
      </view>
    </view>
    <!-- 列表区域2 -->
    <view v-if="false" class="m-10px mt-30px rounded-4px bg-#f7f8fa shadow-md">
      <view class="list-item">
        <view class="flex items-center p-12px">
          <uv-icon name="bell" size="20" color="#fbc118" class="mr-8px" />
          <text class="flex-1 text-16px">订阅更新</text>
          <uv-icon name="arrow-right" size="16" color="#ccc" />
        </view>
      </view>
      <view class="list-item">
        <view class="flex items-center p-12px">
          <uv-icon name="empty-page" size="20" color="#c1c1c1" class="mr-8px" />
          <text class="flex-1 text-16px">常见问题</text>
          <uv-icon name="arrow-right" size="16" color="#ccc" />
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// //定义css变量
// .custom-bg {
//   background-color: #f7f8fa;
// }
// //使用
// .custom-bg {
//   background-color: var(--custom-bg-color);
// }
// :root {
//   --custom-bg-color: #f7f8fa;
// }

/* 基础样式 */
.profile-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: linear-gradient(180deg, transparent, #fff 30%), linear-gradient(90deg, #52c41a 40%, #fbc118 100%);

  box-sizing: border-box;

  .list-item {
    border-bottom: 1px solid #eee;
    list-style: none;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #f0f0f0;
    }
  }

  .list-item:last-child {
    border-bottom: none;
  }
}
</style>
